<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自适应</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <link rel="stylesheet" type="text/css" href="../libs/iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" media="all and (orientation : landscape)" href="css/desktop.css">
    <link rel="stylesheet" type="text/css" media="all and (orientation : portrait)" href="css/portal.css">
</head>
<body>
<div id="nav">
    <span class="iconfont icon-layers icon-logo"></span>
    <span class="logo-text">LZUGIS</span>
    <span class="iconfont icon-list" id="nav-switch"></span>
    <ul class="navs" id="navs">
        <li>首页</li>
        <li>业务导航</li>
        <li>地图导航</li>
    </ul>
</div>
<ul class="icons" id="icons">
    <li class="active">
        <span class="iconfont icon-GIS" data-msg="GIS"></span>
    </li>
    <li>
        <span class="iconfont icon-list" data-msg="LIST"></span>
    </li>
    <li>
        <span class="iconfont icon-list" data-msg="LAYER"></span>
    </li>
    <li>
        <span class="iconfont icon-GIS" data-msg="QUERY"></span>
    </li>
</ul>
<script src="../../libs/jquery/jquery-3.1.1.min.js"></script>
<script>
    $("#nav-switch").on("click", function(){
        $("#navs").toggle();
    });
    $("#navs>li").on("click", function(){
        $("#navs>li").removeClass("active");
        $(this).addClass("active");
        var mql = window.matchMedia("(orientation: portrait)");
        if(mql.matches)$("#navs").hide();
    });
    $("#icons>li").on("click", function(){
        $("#icons>li").removeClass("active");
        $(this).addClass("active");
    });
</script>
</body>
</html>